<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>blog1</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <!-- 网页头部 -->
    <div class="header">
      <div class="logo"><img src="./image/logo.png" alt="logo" /></div>
      <div class="nav">
        <ul>
          <li>首页</li>
          <li>图片</li>
          <li>视频</li>
          <li>手机</li>
        </ul>
      </div>
    </div>
    <!-- 网页主体 -->
    <div class="main">
      <!-- 主体头部 -->
      <div class="top"><img src="image/1.jpeg" /></div>
      <!-- 主体头部遮罩层 -->
      <div class="topLayer"></div>
      <div class="topLayer-top">
        <div class="word">MY BEAUTIFUL LIFE</div>
        <button>LOOK MORE &gt;</button>
      </div>
      <!-- 主体中间部分 -->
      <div class="middle">
        <!-- 中间部分-头部位置 -->
        <div class="m-top">
          <div class="comment weibo">
            <img src="image/weibo.png" />
            <div class="com">MICROBLOG</div>
          </div>
          <div class="comment weixin">
            <img src="image/weixin.png" />
            <div class="com">WECHAT</div>
          </div>
          <div class="comment qq">
            <img src="image/QQ.png" />
            <div class="com">QQ</div>
          </div>
        </div>
        <div class="clear"></div>
        <!-- 为后面清除浮动 -->
        <!-- 中间部分-中间位置 -->
        <div class="m-middle">
          " I want to give good things to record down,<br />
          after the recall will be very beautiful."
        </div>
        <!-- 中间部分-底部位置 -->
        <div class="m-bottom">
          <div class="m-com">
            <img src="image/03-01.jpg" />
            <div class="des1">Cool Image</div>
            <div class="des2">Record The Picture</div>
          </div>
          <div class="m-com">
            <img src="image/03-02.jpg" />
            <div class="des1">Great Picture</div>
            <div class="des2">Record The Picture</div>
          </div>
          <div class="m-com">
            <img src="image/03-03.jpg" />
            <div class="des1">Cool Image</div>
            <div class="des2">Record The Picture</div>
          </div>
        </div>
      </div>
      <div class="clear"></div>
      <!-- 为后面清除浮动 -->
      <!-- 主体底部部分 -->
      <div class="bottom">
        <div class="content">
          <div class="title">FROM THE PHOTO ALBUM</div>
          <div class="pic-content">
            <dl>
              <dt><img src="image/04-01.jpg" /></dt>
              <dd class="word">
                Life is like a book, just read more and more<br />
                refined, more and more carefully. When read,<br />
                mind open, all things have been indifferent to<br />
                heart. Life is the precipitation.
              </dd>
            </dl>
            <dl>
              <dt><img src="image/04-02.jpg" /></dt>
              <dd class="word">
                Life is like a cup of tea, let people lead a<br />
                person to endless aftertastes. You again good<br />
                taste, it will always have a different taste,<br />
                different people will have different taste more.
              </dd>
            </dl>
          </div>
          <div class="clear"></div>
          <!-- 为后面清除浮动 -->
        </div>
      </div>
    </div>
    <!-- 网页底部 -->
    <div class="footer"><div class="word">欢迎小伙伴们的到来！</div></div>
  </body>
</html>
